<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       /* html{
            margin: 10px;
            border: 2px solid red;
        }
        body{
            margin: 10px;
            border: 2px solid green;
        }*/

        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #app{
            width: 100%;
            height: 100%;
            overflow: auto;
        }
        #test{
            /*
                如果当一个绝对定位的元素 找不到任何一个开启定位的祖先元素;
                那它会参照于初始包含块进行定位

                初始包含块 是一个视窗大小的矩形 默认情况下位置和视窗保持一致

                当滑动系统滚动条时 初始包含块的位置会产生运动
            */
            position: absolute;
            left: 10px;
            top: 10px;

            width: 100px;
            height: 100px;
            background: pink;
        }
    </style>
</head>
<body>
    <!--1. 让app充当视口
    2. 让app开启滚动条
    3. 让元素参照于初始包含块进行绝对定位-->
    <div id="app">
        <div id="test"></div>
        <div style="height: 3000px"></div>
    </div>
</body>
</html>